<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>thymeleaf and bootstrap study</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <!-- 为使IE6、7、8版本浏览器兼容css3样式，引入下面代码 -->
    <!-- <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> -->
</head>
<body>
	<div>
		-、标题： <h1>主标题<small>副标题为主标题65%</small></h1>
<!-- ============================================================================== -->								
		二、段落： <p>这是bootstrap的段落样式</p>
<!-- ============================================================================== -->								
		三、强调内容： <p>我是<small>缩小字体</small>，我的样子长成这样我是<strong>加粗文本</strong>，我的样子长成这样我是<cite>普通文本</cite>，</p>
			 lead：<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
<!-- ============================================================================== -->								
		四、粗体：	 <p>我在学习<strong>Bootstrap</strong>，我要掌握<b>Bootstrap</b>的所有知识。</p>
<!-- ============================================================================== -->								
		五、斜体：	 <p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
<!-- ============================================================================== -->								
		六、强调相关的类：<div class="text-muted">提示，使用浅灰色（#999）</div>
					<div class="text-primary">主要，使用蓝色（#428bca）</div>
					<div class="text-success">成功，使用浅绿色(#3c763d)</div>
					<div class="text-info">通知信息，使用浅蓝色（#31708f）</div>
					<div class="text-warning">警告，使用黄色（#8a6d3b）</div>
					<div class="text-danger">危险，使用褐色（#a94442）</div>
<!-- ============================================================================== -->								
		七、文本对齐风格：<p class="text-left">我居左</p>
					<p class="text-center">我居中</p>
					<p class="text-right">我居右</p>
					<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
<!-- ============================================================================== -->								
		八、列表--简介：<div>
						<ul>
						    <li>无序列表信息1</li>
						    <li>无序列表信息2</li>
						    <li>无序列表信息3</li>
						</ul>
						<ol>
						    <li>有序列表信息1</li>
						    <li>有序列表信息2</li>
						    <li>有序列表信息3</li>
						</ol>
						<dl>
						    <dt>定义列表标题</dt>
						    <dd>定义列表信息1</dd>
						    <dd>定义列表信息2</dd>
						</dl>
					</div>
<!-- ============================================================================== -->								
		九、列表--无序列表、有序列表：	<h5>有序列表嵌套</h5>
								<ol>
								    <li>有序列表</li>
								    <li>
								    有序列表
								        <ol>
								        <li>有序列表(2)</li>
								        <li>有序列表(2)</li>
								        </ol>
								    </li>
								    <li>有序列表</li>
								</ol>
<!-- ============================================================================== -->								
		十、列表--去点列表：			<ul>
								    <li>
									    项目列表
									        <ul>
									        <li>带有项目符号</li>
									        <li>带有项目符号</li>
									        </ul>
									    </li>
									    <li>
									    项目列表
									        <ul class="list-unstyled">
									        <li>不带项目符号</li>
									        <li>不带项目符号</li>
									        </ul>
									    </li>
									    <li>项目列表</li>
								</ul>
								<!--有序列表去序号-->
								<ol>
								    <li>
								    项目列表
								        <ol>
								        <li>带有项目编号</li>
								        <li>带有项目编号</li>
								        </ol>
								    </li>
								    <li>
								    项目列表
								        <ol class="list-unstyled">
								        <li>不带项目编号</li>
								        <li>不带项目编号</li>
								        </ol>
								    </li>
								    <li>项目列表</li>
								</ol>
<!-- ============================================================================== -->								
		十-、列表--内联列表：			<ul class="list-inline">
									<li>北京</li>
									<li>上海</li>
									<li>广州</li>
									<li>深圳</li>
								</ul>
<!-- ============================================================================== -->								
		十二、列表--定义列表：			<dl>
								    <dt>北京</dt>
								    <dd>北京是中国的首都，是政治文化集中地</dd>
								    <dt>上海</dt>
								    <dd>上海号称东方的巴黎</dd>
								</dl>
<!-- ============================================================================== -->								
		十三、列表--水平定义列表：		<dl>
								    <dt>北京</dt>
								    <dd>北京是中国的首都，是政治文化集中地</dd>
								    <dt>上海</dt>
								    <dd>上海号称东方的巴黎</dd>
								</dl>
<!-- ============================================================================== -->								
		十三、列表--水平定义列表：		<dl class="dl-horizontal">
								    <dt>北京</dt>
								    <dd>北京是中国的首都，是政治文化集中地</dd>
								    <dt>上海</dt>
								    <dd>上海号称东方的巴黎</dd>
								</dl>
<!-- ============================================================================== -->	
		十四、代码：				code风格：
								<div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>
								pre风格：
								<div style="width: 500px">
									<pre class="pre-scrollable">
										&lt;ul&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
											&lt;li&gt;...&lt;/li&gt;
										&lt;/ul&gt;
									</pre>
								</div>
								kbd风格：
								<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>	
<!-- ============================================================================== -->
		十四、表格：	
		基础表格:			
		<table class="table">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		斑马线表格:
		<table class="table-striped">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		带边框表格:
		<table class="table-bordered">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		鼠标悬停高亮的表格:
		<table class="table-hover">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		紧凑型表格:
		<table class="table-condensed">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		响应式表格:
		<table class="table-responsive">
		    <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
		综合型（基础表格,鼠标悬停高亮的表格,响应式表格）:
		<table class="table table-hover table-responsive">
		     <thead>
		    	<tr>
			        <th>作者</th>
			        <th>教程名称</th>
			        <th>地址</th>
			    </tr>
		    </thead>
		  	<tbody>
		   		 <tr th:each="learn : ${learnList}">
			        <td th:text="${learn.author}">test</td>
			        <td th:text="${learn.title}">SPringBoot</td>
			        <td><a th:href="${learn.url}" target="_blank">点我</a></td>
			    </tr>
		   	</tbody>
		</table>
<!-- ============================================================================== -->
		十五、表格--表格行的类：
		<table class="table table-bordered">
			<thead>
			  <tr>
			    <th>类名</th>
			    <th>描述</th>
			  </tr>
			</thead>
			<tbody>
			  <tr class="active">
			    <td>.active</td>
			    <td>表示当前活动的信息</td>
			  </tr>
			  <tr class="success">
			    <td>.success</td>
			    <td>表示成功或者正确的行为</td>
			  </tr>
			  <tr class="info">
			    <td>.info</td>
			    <td>表示中立的信息或行为</td>
			  </tr>
			  <tr class="warning">
			    <td>.warning</td>
			    <td>表示警告，需要特别注意</td>
			  </tr>
			  <tr class="danger">
			    <td>.danger</td>
			    <td>表示危险或者可能是错误的行为</td>
			  </tr>
			</tbody>
		</table> 
<!-- ============================================================================== -->
		十六、表单：
			<form role="form">
				<div class="form-group">
					<label for="exampleInputEmail1">邮箱：</label>
					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"></input>
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">密码</label>
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"></input>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox"></input> 记住密码
					</label>
				</div>
				<button type="submit" class="btn btn-default">进入邮箱</button>
			</form>	
			水平表单：
			
	</div>
	<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="../js/jquery-2.1.1.min.js"/>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="../js/bootstrap.min.js"/>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可 -->
    <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> -->
</body>
</html>